<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/report-list.css"/><!--资讯列表-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">


    <title>研报专题</title>
    <style>

        .report-special-wrap {
            background: rgba(255, 255, 255, 1);
        }

        .placeholder-top {
            background: rgba(255, 255, 255, 0);
            z-index: 1;
        }

        .report-special-head {
            height: 4.6rem;
            width: 7.5rem;
        }

        .report-special-img {
            min-height: 4.6rem;
            overflow:hidden ;
        }

        .report-special-img img {
            width: 100%;
            height: 4.6rem;
            filter: blur(30px);
            -webkit-filter: blur(30px);
            -moz-filter: blur(30px);
            transform: scale(1.2);
        }

        .report-special-bg {
            top: 0;
            left: 0;
            width: 100%;
            height: 4.6rem;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .report-special-left {
            top: 1.74rem;
            left: 0.34rem;
            width: 1.7rem;
            height: 2.24rem;
            margin-right: 0.32rem;
        }

        .report-special-info {
            width: 100%;
            top: 1.74rem;
            left: 0;
            padding: 0 .32rem;
        }

        .report-special-title {
            color: rgba(255, 255, 255, 1);
        }

        .report-special-count {
            width: 100%;
            padding: 0.4rem 0 0.16rem 0;
            color: rgba(255, 255, 255, 0.4);
        }

        .report-special-count span {
            color: white;
        }

        .report-special-desc {
            margin-top: 0.16rem;
            color: rgba(255, 255, 255, 0.7);
            max-width: 5.8rem;
        }

        .report-special-btn {
            margin-top: 0.16rem;
            color: #FF9523;
        }

    </style>
</head>
<body>

<div class="flex-column h-100-p">
    <!--状态栏-->
    <div class="placeholder-top pos-f">
        <!--状态栏-->
        <div class="status-bar pos-f"></div>
        <!--标题栏-->
        <div class="nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()" style="color: #FFFFFF;">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="mescroll" id="mescroll">
        <div class="report-special-head pos-r">
            <div class="report-special-img"><img src="" alt=""></div>
            <div class="report-special-bg pos-a"></div>
            <div class="flex-row">
                <div class="pos-a report-special-left">
                    <img class="w-100-p h-100-p" src=""/>
                </div>
                <div class="flex-column report-special-info pos-a" style="width: 4.84rem;left:2.36rem;">
                    <div class="report-special-title fs20 ff600 line1"></div>

                    <div class="flex-row fs13 align-items-end">
                        <div class="report-special-desc line2 flex-1"></div>
                        <div class="report-special-btn"></div>
                    </div>

                    <div class="report-special-count fs12"></div>

                </div>
            </div>
        </div>

        <div class="pos-r">
            <div class="report-special-wrap"></div>
        </div>
    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<script src="../../plugin/mescroll/js/mescroll.min.js"></script>

<script>
  let pm = {
    lastDttm: DateUtils.getNowInt(),
    pageNum: 1,
    pageSize: 10,
    isScroll: true,
    title: ''
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    pm.funcCode = params.funcCode

    pageScroll()

    //下拉刷新、滚动加载
    meScroll = Template.createMeScroll({
      id: 'mescroll', //区域ID
      pageNum: pm.pageNum,
      downCallback: refreshAchive, //下拉刷新入口
      upCallback: getInfoListForResearch //滚动加载入口
    })
  }

  function startPage(params) {
    //研报专题列表刷新
    $('.readCnt_' + params.infoId).html(params.readCnt)
    $('.commentCnt_' + params.infoId).html(params.commentCnt)
  }

  function reLoadPage(){
    refreshAchive()
  }

  function refreshAchive() {
    pm.isScroll = false//初始化滚动状态
    pm.pageNum = 1
    pm.title = ''
    getResearchTopicInfo(true)
    getInfoListForResearch()
  }

  // 获取研报专题详情
  function getResearchTopicInfo() {
    Server.reportSpecial.getResearchTopicInfo({
      topicCode: pm.funcCode
    }).then(function (data) {
      pm.title = data.topicName
      $('.report-special-img img').attr('src', data.coverImgUrl)
      $('.report-special-left img').attr('src', data.coverImgUrl)
      $('.report-special-title').html(data.topicName)
      $('.report-special-count').html('已更新<span class="report-special-sl"></span>篇')
      $('.report-special-desc').html(data.topicDescribe)
      if (data.topicDescribe && data.topicDescribe.length > 25) {
        $('.report-special-btn').html('展开')
      }

      $('.report-special-btn').click(function () {
        Template.bottomPop(data.topicName, data.topicDescribe)
      })

    })
  }

  function getInfoListForResearch() {
    // 获取研报列表
    Server.reportSpecial.getInfoListForResearch({
      pageNum: pm.pageNum,
      pageSize: pm.pageSize,
      infoType: '8',
      funcCode: pm.funcCode
    }).then(function (data) {
      let htmlStr = ''
      let len = 0
      if (data.infoListForResearchs !== null) {
        len = data.infoListForResearchs.length
        $.each(data.infoListForResearchs, function (i, item) {
          //处理分隔线
          if (pm.pageNum > 1 || i >= 1) {
            htmlStr += '<div class=\'info-list-topborder\'></div>'
          }
          htmlStr += Template.reportList(item)
        })

        if (pm.pageNum === 1) {
          $('.report-special-wrap').html(htmlStr)
        } else {
          $('.report-special-wrap').append(htmlStr)
        }
        $('.report-special-sl').text(data.total)

        if (len === pm.pageSize) {
          pm.pageNum ++
        }
      }

      meScroll.endSuccess(len, len === pm.pageSize)
    }).catch((error) => {
      meScroll.endErr()
    })
  }

  //处理状态栏滚动效果
  function dealHead(scrollTop) {
    let currStop
    if (scrollTop < 64) {
      currStop = scrollTop
      $('.center-bar').html('')
      $('.left-bar').css({
        'color': 'rgb(255,255,255)'
      })
    } else {
      currStop = 64
      $('.center-bar').html(pm.title)
      $('.left-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
    }
    $('.placeholder-top').css({
      'background': 'rgba(255, 255, 255, ' + currStop / 64 + ')'
    })

  }

  /**
   * @param callback 翻页回调函数
   */
  function pageScroll() {
    $('.mescroll').scroll(function () {
      //需要特殊处理的滚动区域，需要放在scroller元素区域内
      let scrollTop = $(this).scrollTop()
      dealHead(scrollTop)
    })
  }

</script>
</html>
